body,
html {
    margin: 0;
    padding: 0;
    color:#000;
    background:#fff;
    font: 14px Verdana, sans-serif;
}

#ui-left {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    z-index: 10;
}

#ui-right {
    display: block;
    position: fixed;
    left: 22.5%;
    top: 0;
    width: 77.5%;
    height: 100%;
    z-index: 1;
}

.ui-box {
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top: 0;
}

.ui-box h2 {
    background: #333;
    border: 1px solid #333;
    border-radius: 10px 10px 0 0;
    color: #fff;
    margin: 0 -10px 10px -10px;
    padding: 5px;
    font-size: 12px;
}

.ui-valid-target { 
    background-color: rgba(255, 204, 102, 0.6) !important;
}

.ui-valid-target-hover { 
    background-color: rgba(102, 204, 255, 0.6) !important; 
}

.ui-mapped {
    background-color: rgba(204, 255, 102, 0.6) !important;
}

#ui-design {
    display: block;
    height: 260px;
    margin-bottom: 10px;
}

#ui-vis { height: 500px }

#ui-data ul, #ui-primitives ul {
    list-style-type: none;
    padding: 0;
    cursor: url(../imgs/openhand.cur), default !important;
}

#ui-primitives ul li {
    float: left;
    display: block;
    width: 16px;
    height: 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #fff;
    text-indent: -999em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#ui-left ul li:hover { background-color: #ddd; }

.primitive_rect { background-image: url(../imgs/rect.png); }
.primitive_cartesian_axes { background-image: url(../imgs/axes.png); }

#ui-new-panel {
    background: #ccc;
    border: 1px solid #ccc;
}

#ui-new-panel h3 {
    color: #999;
    font-size: 24px;
    text-align: center;
    vertical-align: middle;
}

.vis-panel {
    border: 1px solid #999;
    border-radius: 10px;
    position: relative;
    float: left;
    margin-right: 20px;
    width: 250px; 
    height: 225px;
}

.delegate, .delegate-preview { 
    position: absolute; 
    border: 1px dashed #999;
}

.delegate .primitive {
    background: steelblue; 
    position: absolute; 
}

.dropzone { 
    position: absolute; 
    display: none;
    background: #999;
    cursor: pointer;
}

.dropzone:hover { background: #aaa; }

.dropzone h3 { 
    text-transform: lowercase; 
    font-size: 13px;
}

.delegate:hover, .delegate-droppable {
    border: 1px dashed #999 !important;
}

.delegate:hover .dropzone, .delegate-preview .dropzone, .delegate-droppable .dropzone {
    display: block !important;
}

.delegate svg text { font-size: 8px; }
.delegate .axis path, .delegate .axis line { stroke: black; }

.anchor {
    position: absolute;
    background: #999;
    display: none;
}

.vis-stage {
    border: 1px solid #999;
    width: 350px;
    height: 200px;
    resize: both;
    overflow: hidden;
}

fieldset {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 0;
    padding: 5px 15px;
    background: #999;
    border: 1px solid #666;
    width: 200px;
    font-size: 11px;
}

fieldset legend {
    font-size: 13px;
    font-weight: bold;
    display: none;
}

fieldset div { 
    float: left;
    clear: both;
    width: 200px;
    margin-bottom: 10px;
}

fieldset label { 
    float: left;
    width: 75px; 
}

fieldset button { 
    float: left; 
    clear: both;
    margin: 0;
}

fieldset input, fieldset select {
    float: left;
    width: 115px;
}

fieldset input[type=number] { width: auto; }

.axis path,
.axis line {
    fill: none;
    /*stroke: black;*/
    shape-rendering: crispEdges;
}